<template>
  <div class="container">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">产品商城</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">首页</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">关于我们</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">联系</a>
            </li>
          </ul>
        </div>
        <div class="d-flex">
          <input v-model="searchQuery" class="form-control me-2" type="search" placeholder="搜索产品" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">搜索</button>
        </div>
      </div>
    </nav>

    <!-- 产品列表 -->
    <div class="row mt-4">
      <div v-for="product in filteredProducts" :key="product.id" class="col-md-4 mb-4">
        <div class="card h-100">
          <img :src="product.image" class="card-img-top" :alt="product.name">
          <div class="card-body">
            <h5 class="card-title">{{ product.name }}</h5>
            <p class="card-text">{{ product.description }}</p>
            <div class="d-flex justify-content-between align-items-center">
              <span class="text-primary h4">$ {{ product.price }}</span>
              <div>
                <button class="btn btn-primary btn-sm me-2" @click="viewProductDetails(product)">
                  <i class="bi bi-eye-fill"></i> 查看详情
                </button>
                <button class="btn btn-success btn-sm" @click="addToCart(product)">
                  <i class="bi bi-cart-plus-fill"></i> 添加到购物车
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 购物车模态框 -->
    <div class="modal fade" id="cartModal" tabindex="-1" aria-labelledby="cartModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="cartModalLabel">购物车</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div v-if="cart.length > 0">
              <div v-for="item in cart" :key="item.id" class="card mb-3">
                <div class="card-body">
                  <h5 class="card-title">{{ item.name }}</h5>
                  <p class="card-text">数量: {{ item.quantity }}</p>
                  <p class="card-text">总价: $ {{ item.price * item.quantity }}</p>
                  <button class="btn btn-danger btn-sm" @click="removeFromCart(item)">
                    <i class="bi bi-trash-fill"></i>
                  </button>
                </div>
              </div>
            </div>
            <div v-else>
              <p>您的购物车是空的。</p>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary">结算</button>
          </div>
        </div>
      </div>
        </div>
      </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      products: [
        {
          id: 1,
          name: '产品 A',
          description: '这是产品 A 的描述。',
          price: 100,
          image: 'path-to-your-product-a-image.jpg',
        },
        {
          id: 2,
          name: '产品 B',
          description: '这是产品 B 的描述。',
          price: 150,
          image: 'path-to-your-product-b-image.jpg',
        },
        // 更多产品...
      ],
      cart: []
    };
  },
  computed: {
    filteredProducts() {
      return this.products.filter(product => {
        return product.name.toLowerCase().includes(this.searchQuery.toLowerCase());
      });
    }
  },
  methods: {
    addToCart(product) {
      const cartItem = this.cart.find(item => item.id === product.id);
      if (cartItem) {
        cartItem.quantity++;
      } else {
        this.cart.push({ ...product, quantity: 1 });
      }
      // 可以在这里触发模态框显示
      // $('#cartModal').modal('show');
    },
    removeFromCart(product) {
      const index = this.cart.findIndex(item => item.id === product.id);
      if (index > -1) {
        if (this.cart[index].quantity > 1) {
          this.cart[index].quantity--;
        } else {
          this.cart.splice(index, 1);
        }
      }
    },
    viewProductDetails(product) {
      // 这里可以跳转到产品详情页面，或者显示产品详情模态框
      console.log('查看产品详情', product);
    }
  }
};
</script>

<style scoped>
/* 可以在这里添加一些自定义样式 */
</style>
